@guardian/src-foundations

Foundations

The Guardian's design tokens are the atoms from which all our visual design is built. They are intended for use with a CSS-in-JS library such as Emotion.

Install

$ yarn add @guardian/src-foundations

Use

Palette

import { palette } from "@guardian/src-foundations"

const backgroundColor = css`
    background-color: ${palette.neutral[97]};
`

Media queries

DEPRECATED! Please import media queries from @guardian/src-utilities

import { mobileLandscape, from, until } from "@guardian/src-foundations"

const styles = css`
    padding: 0 10px;

    ${mobileLandscape} {
        padding: 0 20px;
    }

    ${from.phablet.until.desktop} {
        padding: 0 32px;
    }

    ${until.wide} {
        padding: 0 40px;
    }
`

Output:

.class-name {
    padding: 0 10px;
}

@media (min-width: 480px) {
    .class-name {
        padding: 0 20px;
    }
}

@media (min-width: 660px) and (max-width: 980px) {
    .class-name {
        padding: 0 32px;
    }
}

@media (max-width: 1300px) {
    .class-name {
        padding: 0 40px;
    }
}

Visually Hidden

DEPRECATED! Please import visuallyHidden from @guardian/src-utilities

For elements that should not appear to sighted users, but are useful to assistive technology users.

import { visuallyHidden } from "@guardian/src-foundations"

const label = css`
    ${visuallyHidden};
`

Focus Halo

DEPRECATED! Please import focusHalo from @guardian/src-utilities

This mixin provides a clear focus state for elements that may receive keyboard focus.

import { focusHalo } from "@guardian/src-foundations"

const input = css`
    ${focusHalo};
    width: 200px;
    height: 44px;
`